<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色授权</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div>
    <div class="layui-container" id="rolebind">
        <div class="layui-btn-group">
            <button class="layui-btn" id="authorization">确认授权</button>
        </div>
        <form class="layui-form">
            <div id="xtree"></div>
        </form>
    </div>

</div>
</body>
<script src="layui/layui.js"></script>
<script src="layui-xtree/layui-xtree.js"></script>
<script src="js/common.js" charset="utf-8"></script>
<script>
    function roleAuthorization(rowData) {
        layui.use(['layer', 'jquery', 'form'], function () {
            var layer = layui.layer,
                form = layui.form,
                $ = layui.jquery;

            //角色id
            var roleId = rowData.id;

            //用户id
            var userId = layui.data('userData').data.id;

            var treeData = [];

            //树结构资源请求
            doAjax($, layer, 'GET', false, {}, '/menu/menuTree', afterGetTree);

            //请求成功回调函数
            function afterGetTree(result) {
                if (result.status == "200") {
                    treeData = result.data;
                } else {
                    layer.msg(result.msg);
                }

            }

            //Layui风格树状图，不兼容IE
            var xtree = new layuiXtree({
                elem: 'xtree'   //(必填) 放置xtree的容器id，不要带#号
                , form: form     //(必填) layui 的 from
                , data: treeData     //(必填) 数据接口，需要返回固定结构的json字符串
                , ckall: true    //启用全选功能，默认值：false
                , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                    open: "&#xe625;"       //节点打开的图标
                    , close: "&#xe623;"    //节点关闭的图标
                    , end: "&#xe621;"      //末尾节点的图标
                }
                , color: {       //三种图标颜色，独立配色，更改几个都可以
                    open: "#EE9A00"        //节点图标打开的颜色
                    , close: "#EE9A00"     //节点图标关闭的颜色
                    , end: "#828282"       //末级节点图标的颜色
                }

            });

            //确认授权点击事件
            $('#authorization').on("click", function () {
                //[选中的][末级节点]的数据
                var checkedData = xtree.GetChecked();

                if (checkedData.length < 1) {
                    layer.msg('请先完成权限选择!');
                    return;
                }
                //提交到后台的数据
                var submitData = [];

                //循环出每个节点的隐藏值，作为后台参数
                $.each(checkedData, function (index, value) {

                    //节点隐藏值
                    var nodeVal = value.defaultValue;

                    //通过value值找父级原 checkbox DOM对象
                    var parentDom = xtree.GetParent(nodeVal);

                    //父级值隐藏值
                    var parentVal = $(parentDom).val();

                    //判断是否已添加该父级隐藏值
                    if($.inArray(parentVal,submitData)<0 && parentVal){
                        //父级隐藏值保存到提交数组
                        submitData.push(parentVal);
                    }

                    //空字符串过滤
                    if(nodeVal){
                        //保存选中节点隐藏值到提交数组
                        submitData.push(nodeVal);
                    }


                });

                //发送绑定请求(发送数组时 +'' 转换为字符串)
                doAjax($, layer, 'POST', false, {
                    'userId': userId,
                    'roleId': roleId,
                    'menuIds': submitData + ''
                }, '/role/authorization', afterAuthorization);

                //绑定成功回调函数
                function afterAuthorization(result) {
                    if (result.status == "200") {
                        //编辑成功的提示与跳转
                        layer.msg('授权成功', {
                            icon: 1
                            , time: 1500
                        }, function () {
                            //iframe页面关闭自身
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            //刷新父级数据列表
                            window.parent.location.reload();
                        });

                    } else {
                        layer.msg(result.msg);
                    }
                }
            });

        })
    }
</script>
</html>
